<template>
  <div class="subscribe-back" style="position: relative; width: 100%">
    <div class="subscribe-back-content" @click="goBack">
      <i></i>
      <span>返回</span>
    </div>
  </div>
  <div class="face-page">
    <h1>脸，无处不在丨面孔空想性错视</h1>
    <p>
      你是否有过这样的经历：在工作间埋头苦干许久，一抬头，忽然发现一张脸正兴致勃勃地看着你；倒杯饮料压压惊，却发现气泡仿佛有鼻子有眼睛；打开电脑看纪录片，海洋世界里的某个画面也能让你吓得一抖，感觉看到了奇怪的“脸”。这种现象被称为面孔空想性错视，它是一种心理现象，指人们会在一些随机的、无意义的图案或物体中看到人脸。
    </p>
    <p>
      从进化心理学的角度来看，这种现象可能是人类进化的结果。在远古时代，能够快速识别出人脸对于生存至关重要。无论是识别同伴还是警惕敌人，拥有敏锐的人脸识别能力都能增加生存的几率。因此，人类的大脑逐渐形成了一种高度敏感的人脸识别机制，即使在一些模糊的、不完整的图像中，也会试图去寻找人脸的特征。
    </p>
    <p>
      面孔空想性错视不仅出现在日常生活中，还常常出现在艺术和文化作品中。许多艺术家利用这种现象来创作富有创意的作品，引发观众的共鸣和思考。同时，这种现象也提醒我们，人类的感知和认知是非常主观的，我们看到的世界并不一定是客观存在的，而是受到我们的心理和文化背景的影响。
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const router = useRouter();
    const goBack = () => {
      router.push("/home");
    };
    return {
      goBack,
    };
  },
});
</script>

<style scoped>
.face-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.face-page h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  color: #222;
}

.face-page p {
  font-size: 20px;
  margin-bottom: 20px;
  text-align: justify;
}
/* 返回 */
.subscribe-back {
  background: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 1px 0 0 #edf0f2;
  height: 60px;
  line-height: 60px;
  position: relative;
  z-index: 1;
}

.subscribe-back-content {
  cursor: pointer;
  display: inline-block;
  height: 60px;
}

.subscribe-back-content > i {
  background: url()
    no-repeat;
  background-size: contain;
  display: inline-block;
  height: 17px;
  margin-left: 30px;
  vertical-align: middle;
  width: 17px;
}

.subscribe-back-content > span {
  color: #5c6166;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 6px;
  vertical-align: middle;
}
</style>
